<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-card shadow="hover" class="mgb20" style="height: 252px">
					<div class="user-info">
						<el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-success="afterUploadHook"
							:before-upload="(rawFile: UploadProps['beforeUpload']) => beforeUploadHook(rawFile, { type: 'png,jpg', size: 1 })"
							:http-request="(uploadRequstOptions: UploadRequestOptions) => httpUploadHook(uploadRequstOptions, { a: 1 }, handleUploadSuccess)"
							:auto-upload="true">
							<el-avatar :size="120" :src="userInfo?.avatar || '/src/assets/img/default_avatar.jpg'" />
							<!-- <el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon> -->
						</el-upload>
						<div class="user-info-cont">
							<div class="user-info-name" @click="state.showEditNickBox = true" v-show="!state.showEditNickBox">{{
								userInfo?.nickname || "用户昵称" }}<el-icon size="12" color="gray">
									<EditPen />
								</el-icon></div>
							<div class="user-info-name">
								<el-input size="small" maxlength="12" v-show="state.showEditNickBox" v-focus @blur="updateUserNick"
									v-model="state.editUserRaw.nickname"></el-input>
							</div>
							<div>{{ role }}</div>
						</div>
					</div>
					<div class="user-info-list">
						上次登录时间：
						<span>{{ userInfo?.login_time }}</span>
					</div>
					<div class="user-info-list">
						上次登录地点：
						<span>{{ userInfo?.login_address }}</span>
					</div>
				</el-card>
				<el-card shadow="hover" style="height: 252px">
					<template #header>
						<div class="clearfix">
							<span>心态pro</span>
						</div>
					</template>
					学习程度
					<el-progress :percentage="21.4" color="#42b983"></el-progress>
					工作程度
					<el-progress :percentage="71.6" color="#f1e05a"></el-progress>
					娱乐程度
					<el-progress :percentage="20.6"></el-progress>
					休息程度
					<el-progress :percentage="25" color="#f56c6c"></el-progress>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-row :gutter="20" class="mgb20">
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<el-icon class="grid-con-icon">
									<User />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">1234</div>
									<div>用户访问量</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-2">
								<el-icon class="grid-con-icon">
									<ChatDotRound />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">321</div>
									<div>系统消息</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-3">
								<el-icon class="grid-con-icon">
									<Goods />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">5000</div>
									<div>商品数量</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-card shadow="hover" style="height: 403px">
					<template #header>
						<div class="clearfix">
							<span>待办事项</span>
							<el-button style="float: right; padding: 3px 0" text @click="state.showDrawer = true">添加</el-button>
						</div>
					</template>

					<el-table :show-header="false" :data="todoList" style="width: 100%">
						<el-table-column width="40">
							<template #default="scope">
								<el-checkbox :modelValue="!!scope.row.status"
									@update:modelValue="changePenddingRow(scope.row)"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column>
							<template #default="scope">
								<div class="todo-item" :class="{
									'todo-item-del': scope.row.status
								}">
									<el-popover placement="top-start" title="详情" :width="200" trigger="hover"
										:content="scope.row.content">
										<template #reference>
											{{ scope.row.title }}
										</template>
									</el-popover>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<form-drawer v-model:showDrawer=" state.showDrawer " :schema=" schema " @submit=" submit "></form-drawer>
	</div>
</template>

<script setup lang="ts" name="dashboard">
import { reactive } from 'vue';
import { beforeUploadHook, afterUploadHook, httpUploadHook } from '@/hooks/useUpload'
import { ElMessage, UploadProps, UploadRequestOptions } from 'element-plus';
import * as UserApi from '@/api/user'
import { AxiosResponse } from 'axios';
import { useUserStore } from '@/store/user';
import { FormDataRowType } from 'types/form';
import { RequestPayload } from 'types/request'
const userStore = useUserStore()
const state = reactive({
	editUserRaw: {
		nickname: userStore.getUserInfo('nickname')
	},
	showEditNickBox: false,
	showDrawer: false
})

const userInfo = computed(() => {
	return userStore.getUser
})

const role: string = userInfo?.is_manage == 1 ? '超级管理员' : '普通用户';
const todoList = ref([]);

const schema: FormDataRowType[] = [
	{ field: 'title', label: '标题', type: 'input' },
	{ field: 'content', label: '内容', type: 'textarea' },
]

onMounted(() => {
	listPendding()
})

const listPendding = () => {
	UserApi.getUserPendding().then((result) => {
		

		todoList.value = result.data.list

	});
}
const changePenddingRow = (row: RequestPayload) => {

	const payload: RequestPayload = { ...row }
	payload.status = !payload.status
	UserApi.putUserPendding({ ...payload }).then((result) => {
		ElMessage.success('修改成功')
		listPendding()
	});
}
const submit = (data: RequestPayload) => {
	UserApi.addUserPendding({ title: data.value.title, content: data.value.content }).then((result) => {
		ElMessage.success('新增成功')
		listPendding()
	});

}

const handleUploadSuccess = (result: AxiosResponse) => {
	const avatar = result.data[0].url
	userStore.updateUserInfo({ avatar }).then((result) => {
		ElMessage.success('更新成功')
		userStore.refreshUserInfo()
	});
}

const updateUserNick = () => {
	userStore.updateUserInfo({ nickname: state.editUserRaw.nickname }).then((result) => {
		ElMessage.success('更新成功')
		userStore.refreshUserInfo()
	});
	state.showEditNickBox = false
}

</script>

<style scoped>
.el-row {
	margin-bottom: 20px;
}

.grid-content {
	display: flex;
	align-items: center;
	height: 100px;
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #999;
}

.grid-num {
	font-size: 30px;
	font-weight: bold;
}

.grid-con-icon {
	font-size: 50px;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color: #fff;
}

.grid-con-1 .grid-con-icon {
	background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
	color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
	background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
	color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
	background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
	color: rgb(242, 94, 67);
}

.user-info {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 20px;
}

.user-info-cont {
	padding-left: 50px;
	flex: 1;
	font-size: 14px;
	color: #999;
}

.user-info-cont div:first-child {
	font-size: 20px;
	color: #222;
}

.user-info-list {
	font-size: 14px;
	color: #999;
	line-height: 25px;
}

.user-info-list span {
	margin-left: 70px;
}

.mgb20 {
	margin-bottom: 20px;
}

.todo-item {
	font-size: 14px;
}

.todo-item-del {
	text-decoration: line-through;
	color: #999;
}

.schart {
	width: 100%;
	height: 300px;
}
</style>
